<template>
	<view class="container">
		<loading-page mode="zoom" height="400rpx" :show="integrationLoading" color="#FFFFFF"
			loadingColor="#FFFFFF"></loading-page>
		<view class="main" :style="{backgroundImage:`url(${background})`}"
			v-if="!integrationLoading && integralProductList.length > 0"
			@click.stop="$navigateTo('/subPackages/integral-mail/index')">
			<view class="list">
				<view class="list-main u-flex">
					<view class="li u-flex-col u-flex" v-for="(item,index) in integralProductList" :key="index"
						@click.stop="$navigateTo('/subPackages/integral-mail/product-detail?product_id='+item.id)">
						<u-image :src="item.product.cover_image" width="122rpx" height="120rpx"
							v-if="item.type == 10"></u-image>
						<view class="li-coupon u-flex-col u-col-center" :style="{backgroundImage:`url(${productBase})`}"
							v-else>
							<view class="price u-flex u-col-start"
								v-if="item.coupon.discount_method == 1 || item.coupon.discount_method == 2">
								<view class="price-icon">￥</view>
								<view class="price-text">
									{{item.coupon.discount_method == 1?item.coupon.full_reduce:item.coupon.direct_reduce}}
								</view>
							</view>
							<view class="discount" v-if="item.coupon.discount_method == 3">
								<view class="discount-header u-flex">
									<view class="discount-num">{{item.coupon.discount}}</view>
									<view class="discount-icon">折</view>
								</view>
							</view>
							<view class="li-illustrate" v-if="item.coupon.discount_method == 1">
								满{{item.coupon.full}}元可使用</view>
							<view class="li-illustrate" v-if="item.coupon.discount_method == 2">无门槛优惠券</view>
							<view class="li-illustrate" v-if="item.coupon.discount_method == 3">折扣券可直接使用</view>
						</view>
						<view class="name">{{item.type == 10?item.product.name:item.coupon.name}}</view>
						<view class="price">{{item.integral}}积分</view>
						<view class="li-button">立即兑换</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				background: 'https://qn.mtj.cdydsy.com/user_client/image/integration-user-base.png',
				productBase: "https://qn.mtj.cdydsy.com/user_client/image/integration-product-base.png"
			}
		},
		computed: {
			...mapState({
				integrationLoading: state => state.user.integrationLoading,
				integralProductList: state => state.user.integralProductList,
			})
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 414rpx;
		background: #E9E9E9;
		border-radius: 24rpx;

		.main {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			height: 270rpx;
			width: 694rpx;
			padding: 94rpx 20rpx 0;
			box-sizing: border-box;

			.list {
				padding: 24rpx 38rpx 24rpx 38rpx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 10rpx;

				.list-main {
					overflow-x: auto;

					.li {
						margin-right: 94rpx;

						.li-coupon {
							width: 122rpx;
							height: 120rpx;
							background-size: cover;
							background-repeat: no-repeat;

							.price {
								padding-top: 8rpx;

								.price-icon {
									font-size: 12rpx;
									line-height: 20rpx;
								}

								.price-text {
									font-size: 20rpx;
									padding-left: 2rpx;
								}
							}

							.discount {
								padding-top: 8rpx;

								.discount-header {
									.discount-num {
										font-size: 20rpx;
										padding-right: 6rpx;
										line-height: 1;
										font-weight: 500;
									}

									.discount-icon {
										font-size: 12rpx;
									}
								}
							}

							.li-illustrate {
								padding-top: 6rpx;
								font-size: 12rpx;
							}
						}

						.name {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 20rpx;
							color: #3E3E3E;
							padding-top: 12rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							line-height: 1;
							width: 116rpx;
							text-align: center;
						}

						.price {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 24rpx;
							color: $base-color;
							padding-top: 14rpx;
							line-height: 1;
							text-align: center;
						}

						.li-button {
							width: 124rpx;
							height: 36rpx;
							background: #000000;
							border-radius: 4rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
							line-height: 36rpx;
							margin-top: 22rpx;
							text-align: center;
						}
					}

					.li:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}
</style>